<template>
  <div class="wrap">
    <switch-dialog
      :showDialog="switchDialog.showDialog"
      @cancle="cancleChangeSwitch"
      @choseSwitch="choseSwitch"
    ></switch-dialog>
    <vue-context-menu
      class="right-menu"
      :contextMenuData="contextMenuData"
      @emptySwitch="emptySwitch"
      @forwardSwitch="forwardSwitch"
      @backwardSwitch="backwardSwitch"
      @emptyRowSwitch="emptyRowSwitch"
      @emptyColSwitch="emptyColSwitch"
    ></vue-context-menu>
    <div class="button-row">
      <el-button type="primary" @click="returnList">返回试轴器列表</el-button>
      <el-button type="success" @click="autoChoose">自动选择轴体</el-button>
      <el-button type="warning" @click="autoPlace">自动排列轴体</el-button>
    </div>
    <div class="tester-info">
      <div class="item">
        <div class="desc">创建人：</div>
        <div class="username">{{ userName }}</div>
      </div>
      <div class="item">
        <div class="desc">创建时间：</div>
        <div class="create-time">{{ createTime }}</div>
      </div>
      <div class="item">
        <div class="desc">最后修改时间：</div>
        <div class="create-time">{{ updateTime }}</div>
      </div>
    </div>
    <div class="input">
      <span class="desc">试轴器名称：</span>
      <el-input v-model="name" class="name"></el-input>
      <el-checkbox v-model="open" label="是否公开" border></el-checkbox>
      <el-button type="primary" @click="save">保存修改</el-button>
    </div>
    <div class="plate">
      <div
        class="row-cell"
        :style="{ width: rowCellWidth }"
        v-for="row in rowCount"
        :key="row"
      >
        <div class="col-cell" v-for="col in colCount" :key="col">
          <div
            class="cell"
            @click="startChoiseSwitch(row, col)"
            @click.right="showMenu(row, col)"
            :style="{
              backgroundColor: backgroundColor(row, col),
              color: textColor(row, col)
            }"
          >
            {{ switchText(row, col) }}
          </div>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
import { Button, Input, Checkbox, Dialog } from "element-ui";
import {
  getAdminTesterDetail,
  editAdminTester,
  setAdminTesterSwitch,
  emptyAdminTesterSwitch,
  forwardAdminTesterSwitch,
  backwardAdminTesterSwitch,
  autoChooseAdminTester,
  autoAdminPlaceTester,
  emptyAdminTesterSwitchRow,
  emptyAdminTesterSwitchCol
} from "@/api/admin-tester.js";
import SwitchDialog from "@/components/SwitchDialog";
export default {
  name: "config-tester",
  components: {
    [Button.name]: Button,
    [Input.name]: Input,
    [Checkbox.name]: Checkbox,
    [Dialog.name]: Dialog,
    SwitchDialog
  },
  data() {
    return {
      plateId: null,
      name: "",
      userId: null,
      userName: "",
      rowCount: null,
      colCount: null,
      openDesc: "",
      open: false,
      privilegeToEdit: null,
      createTime: "",
      updateTime: "",
      cellVoList: [],
      switchDialog: {
        showDialog: false,
        cellId: null
      },
      selectedCellIndex: -1,
      // contextmenu data (菜单数据)
      contextMenuData: {
        // the contextmenu name(@1.4.1 updated)
        menuName: "demo",
        // The coordinates of the display(菜单显示的位置)
        axis: {
          x: null,
          y: null
        },
        // Menu options (菜单选项)
        menulists: [
          {
            fnHandler: "emptySwitch", // Binding events(绑定事件)
            btnName: "清除轴体" // The name of the menu option (菜单名称)
          },
          {
            fnHandler: "forwardSwitch",
            btnName: "后移一格"
          },
          {
            fnHandler: "backwardSwitch",
            btnName: "前移一格"
          },
          {
            fnHandler: "emptyRowSwitch",
            btnName: "清除一行"
          },
          {
            fnHandler: "emptyColSwitch",
            btnName: "清除一列"
          }
        ]
      }
    };
  },
  mounted() {
    this.plateId = this.$route.params.id;
    this.reRenderTester();
  },
  methods: {
    reRenderTester() {
      getAdminTesterDetail(this.plateId)
        .then(res => {
          this.name = res.name;
          this.userId = res.userId;
          this.userName = res.userName;
          this.rowCount = res.rowCount;
          this.colCount = res.colCount;
          this.openDesc = res.openDesc;
          this.open = res.open;
          this.privilegeToEdit = res.privilegeToEdit;
          this.createTime = res.createTime;
          this.updateTime = res.updateTime;
          this.cellVoList = res.cellVoList;
        })
        .catch(errMsg => this.$alert(errMsg.msg));
    },
    returnList() {
      this.$router.push({ path: `/backend/tester` });
    },
    save() {
      editAdminTester({
        plateId: this.plateId,
        name: this.name,
        open: this.open
      })
        .then(res => {
          this.reRenderTester();
        })
        .catch(errMsg => this.$alert(errMsg.msg));
    },
    cancleChangeSwitch() {
      this.switchDialog.showDialog = false;
    },
    startChoiseSwitch(row, col) {
      let index = (row - 1) * this.colCount + col - 1;
      this.switchDialog.cellId = this.cellVoList[index].id;
      this.switchDialog.showDialog = true;
    },
    switchText(row, col) {
      let index = (row - 1) * this.colCount + col - 1;
      return this.cellVoList[index].simpleName;
    },
    backgroundColor(row, col) {
      let index = (row - 1) * this.colCount + col - 1;
      return "#" + this.cellVoList[index].backgroundColor;
    },
    textColor(row, col) {
      let index = (row - 1) * this.colCount + col - 1;
      return "#" + this.cellVoList[index].color;
    },
    choseSwitch(switchId) {
      setAdminTesterSwitch({
        cellId: this.switchDialog.cellId,
        switchId: switchId
      })
        .then(res => {
          this.reRenderTester();
          this.switchDialog.showDialog = false;
        })
        .catch(errMsg => this.$alert(errMsg.msg));
    },
    showMenu(row, col) {
      event.preventDefault();
      var x = event.clientX;
      var y = event.clientY;
      // Get the current location
      this.contextMenuData.axis = {
        x,
        y
      };
      let index = (row - 1) * this.colCount + col - 1;
      this.selectedCellIndex = index;
    },
    emptySwitch() {
      let cell = this.cellVoList[this.selectedCellIndex];
      emptyAdminTesterSwitch(cell.id)
        .then(res => {
          this.reRenderTester();
        })
        .catch(errMsg => this.$alert(errMsg.msg));
    },
    emptyRowSwitch() {
      let cell = this.cellVoList[this.selectedCellIndex];
      this.$confirm("删除一行轴体, 是否继续?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning"
      })
        .then(() => {
          emptyAdminTesterSwitchRow(cell.id)
            .then(res => {
              this.reRenderTester();
            })
            .catch(errMsg => this.$alert(errMsg.msg));
        })
        .catch(() => {});
    },
    emptyColSwitch() {
      let cell = this.cellVoList[this.selectedCellIndex];
      this.$confirm("删除一列轴体, 是否继续?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning"
      })
        .then(() => {
          emptyAdminTesterSwitchCol(cell.id)
            .then(res => {
              this.reRenderTester();
            })
            .catch(errMsg => this.$alert(errMsg.msg));
        })
        .catch(() => {});
    },
    forwardSwitch() {
      let cell = this.cellVoList[this.selectedCellIndex];
      forwardAdminTesterSwitch(cell.id)
        .then(res => {
          this.reRenderTester();
        })
        .catch(errMsg => this.$alert(errMsg.msg));
    },
    backwardSwitch() {
      let cell = this.cellVoList[this.selectedCellIndex];
      backwardAdminTesterSwitch(cell.id)
        .then(res => {
          this.reRenderTester();
        })
        .catch(errMsg => this.$alert(errMsg.msg));
    },
    autoChoose() {
      autoChooseAdminTester(this.plateId)
        .then(res => {
          this.reRenderTester();
        })
        .catch(errMsg => this.$alert(errMsg.msg));
    },
    autoPlace() {
      autoAdminPlaceTester(this.plateId)
        .then(res => {
          this.reRenderTester();
        })
        .catch(errMsg => this.$alert(errMsg.msg));
    }
  },
  computed: {
    rowCellWidth() {
      return this.colCount * 110 + "px";
    }
  }
};
</script>
<style lang="stylus" scoped>
.wrap {
  .button-row {
    padding-bottom: 15px;
    border-bottom: 1px solid #ccc;
  }

  .right-menu {
    padding-left: 0;
  }

  .tester-info {
    margin-top: 10px;

    .item {
      color: #444;
      margin-right: 20px;
      display: inline-block;
      background-color: #ccc;
      font-size: 16px;

      div {
        display: inline-block;
      }
    }
  }

  .input {
    margin-top: 10px;

    .desc {
      line-height: 40px;
      position: absolute;
      width: 100px;
    }

    .name {
      width: 400px;
      margin-left: 100px;
    }
  }

  .plate {
    margin-top: 5px;
    position: relative;

    .row-cell {
      height: 110px;
      overflow: auto;

      .col-cell {
        float: left;

        .cell {
          width: 100px;
          height: 100px;
          border: 1px solid black;
          margin-right: 4px;
          text-align: center;
          line-height: 25px;
          cursor: pointer;
          font-size: 16px;
          overflow: hidden;

          &:hover {
            border: 1px dashed green;
            font-size: 20px;
            font-weight: bold;
          }
        }
      }
    }
  }
}
</style>